import React from "react";
import { Link, Route, useParams, useRouteMatch } from "react-router-dom";
import {Button, Form, Input, message} from 'antd';

const LayoutProperty = () => {
    const { itemId } = useParams()
    const { url, path } = useRouteMatch();

    const  [form] = Form.useForm();

    //根据itemId 查找节点

    const onFinish = (values) => {
        console.log('Success:', values);
        let _Itemid=values.idItem;
        let _flexGrow=values.flexGrowItem;
        let _flexShrink=values.flexShrinkItem;
        let _flexBasis=values.flexBasisItem;
        let _justifyContent=values.justifyContent;
        let _alignContent=values.alignContent;
        //找到对应节点 进行设置  根据id 找到所有的已恶点   遍历树 进行设置
        if(values.idItem==='-1'){
            message.info("请选中相应节点")
            return
        }
        // let  currentNode=new LayoutTreeNode(_Itemid,-1,-1,"",-1,_flexGrow,[],_justifyContent,_alignContent);
        // console.log("test0:"+layoutTree)
        // let rootNodeCopy = deepCopy(layoutTree);
        // setNodeProperty(rootNodeCopy,currentNode);
        // console.log("===================================================="+layoutTreeRoot)
        // //setLayoutTree(layoutTreeRoot);
        // setLayoutTree(rootNodeCopy);
        // console.log("test1:"+layoutTree)
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };



    const onReset = () => {
        form.resetFields();
    };
    console.log(itemId)
    //根据item查询树


    return (



        <Form
            name="basic"
            form={form}
            labelCol={{
                span: 12,
            }}
            wrapperCol={{
                span: 12,
            }}
            initialValues={{
                // idItem:idVal,
                // flexGrowItem:flexGrowVal,
                // flexShrinkItem:flexShrinkVal,
                // flexBasisItem:flexBasisVal,
                // justifyContent:justifyContentVal,
                // alignContent:alignContentVal
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >

            <Form.Item
                label="id"
                name="idItem"
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="grow"
                name="flexGrowItem"
                rules={[
                    {
                        required: true,
                        message: 'Please input the flex-grow!',
                    },
                ]}
            >
                <Input />
            </Form.Item>


            <Form.Item
                label="Shrink"
                name="flexShrinkItem"
                rules={[
                    {
                        required: true,
                        message: 'Please input the flex-shrink!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="basis"
                name="flexBasisItem"
                rules={[
                    {
                        required: true,
                        message: 'Please input flex-basis!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="justify-Content"
                name="justifyContent"
                rules={[
                    {
                        required: true,
                        message: 'Please input justify-Content!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="align-Content"
                name="alignContent"
                rules={[
                    {
                        required: true,
                        message: 'Please input align-Content!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                wrapperCol={{
                    offset: 8,
                    span: 16,
                }}
            >
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>

                {/*<Button htmlType="button" onClick={onReset}>*/}
                {/*Reset*/}
                {/*</Button>*/}

            </Form.Item>
        </Form>
    );
};

export default LayoutProperty;
